/**
 * Created by jijin on 2017/7/19.
 */
import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableNativeFeedback,
  TouchableOpacity,
  StyleSheet
} from 'react-native';
import Ionicon from 'react-native-vector-icons/Ionicons';
import {AppColors, AppSizes, AppFonts} from '../../../style';

const selectedTextColor = AppColors.textLink;
const selectedBackgroundColor = AppColors.background;

export default class MenuItem extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let {isSelected, icon, tintColor} = this.props;
    let textStyle = [styles.text];
    let containerStyle = [styles.container];
    let iconContainerStyles = [styles.iconContainer];
    let iconElement = icon;

    if (isSelected) {
      if (tintColor) {
        textStyle.push({color: tintColor});
      } else {
        textStyle.push(selectedStyles.text);
      }
      containerStyle.push(selectedStyles.container);
      iconContainerStyles.push(selectedStyles.iconContainer);
      if (icon) {
        iconElement = React.cloneElement(
          icon,
          {color: tintColor || selectedTextColor}
        );
      }
    }
    let {background, onPress, id, title} = this.props;
    return (
      <TouchableNativeFeedback
        background={background}
        onPress={() => {
          onPress(id)
        }}
      >
        <View style={containerStyle}>
          <View style={iconContainerStyles}>
            {iconElement}
          </View>
          <Text style={textStyle}>
            {title}
          </Text>
        </View>
      </TouchableNativeFeedback>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: 48,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  iconContainer: {
    width: 44,
    height: 48,
    marginRight: AppSizes.padding * 0.6,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    flex: 1,
    ...AppFonts.base,
    marginRight: AppSizes.padding * 0.8,
    fontWeight: 'bold'
  },
});

const selectedStyles = StyleSheet.create({
  container: {
    backgroundColor: selectedBackgroundColor
  },
  iconContainer: {
    backgroundColor: selectedBackgroundColor
  },
  text: {
    color: selectedTextColor
  }
});